<template>
  <div class="app-container" @click="handleHiddenR" @click.right="menuIndex" @contextmenu.prevent.capture id="dfb">
    <el-row v-if="dropdowns.length > 0">
      <el-col :span="20" class="breadcrumb-div">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, i) in dropdowns" :key="i" @click.native="breadcrumbChange(item, i)">
            <span style="cursor:pointer">{{ item.title }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="4" style="min-width: 210px; height: 30px;">
        <el-form ref="filter" :model="filter" label-width="0" style="">
          <el-form-item class="mr10 mb0 fl" style="width: 150px">
            <el-input v-model="filter.name" placeholder="名称" size="mini" clearable />
          </el-form-item>
          <el-form-item class="mr10 mb0 fl" style="width: 36px">
            <el-button icon="el-icon-search" size="mini" @click="getList()"></el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div class="fc">
      <div class="fdc" v-for="(item) in list" :key="item.id" @contextmenu.prevent.capture @click.right.stop>
        <el-table v-if="showTables" :id="'dfc'+ item.id" :title="item.name"
          class="file-table"
          :data="fileKeep"
          :border="false"
          :show-header="false"
          @row-dblclick="handleFolder(item)"
          @row-contextmenu="handleContextmenu(item)"
        >
          <el-table-column label="" align="center">
            <template slot-scope="">
              <div class="fcc pr">
                <div class="wjj pa fctc"></div>
                <div class="fcwc pa">{{item.name}}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div class="fdc" v-for="(item) in diskFiles" :key="item.id" @contextmenu.prevent.capture @click.right.stop>
        <el-table v-if="showFlieTalbes" :id="'dft'+ item.id" :title="item.file_name"
          class="file-table"
          :data="fileKeep"
          :border="false"
          :show-header="false"
          @row-contextmenu="handleContextmenuFile(item)"
        >
          <el-table-column label="" align="center">
            <template slot-scope="">
              <div class="fcc pr" @dblclick="handleWV(item.url)">
                <div v-if="fileClass(item.url) === 'tp'">
                    <img :src="item.url" class="tpj" />
                </div>
                <div v-else>
                  <div :class="fileClass(item.url) + ' pa fctc'"></div>
                </div>
                <div class="fcwc pa">{{item.file_name}}</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div ref="ric" class="ri pa" @click.stop>
      <el-card class="box-card">
        <div class="ri-item" @click.stop="handleDialogBefore({...pageItem, ...{dTitle: '重命名', dType: 'edit', dField: dField}})">重命名</div>
        <div class="ri-item" @click.stop="handleDeleteBefore('c')">删 除</div>
      </el-card>
    </div>
    <div ref="rif" class="ri pa" @click.stop>
      <el-card class="box-card">
        <div class="ri-item" @click.stop="downloadFile()">下 载</div>
        <div class="ri-item" @click.stop="handleDeleteBefore('f')">删 除</div>
      </el-card>
    </div>
    <div ref="rib" class="ri pa" @click.stop>
      <el-card class="box-card">
        <div class="ri-item" @click.stop="handleDialogBefore({...{organ_id: parameter.organ_id, p_id: parameter.p_id}, ...{dTitle: '新建文件夹', dType: 'add', dField: dField}})">新建文件夹</div>
        <div class="ri-item" @click.stop="uploadFile({...{e_id: parameter.p_id}, ...{dTitle: '上传附件', dType: 'add', dField: dFieldFileU, dRef: 'fileU'}})">上传文件</div>
      </el-card>
    </div>
    <Dialog ref="dialog" :get-data="flushPage" :info="dialog" />
    <FileU ref="fileU" :get-data="flushPage" :info="dialog" />
  </div>
</template>

<script>
import { disks, delDisk, queryFiles } from '@/api/disk'
import { delF } from '@/api/file/cos'
import Dialog from './disk-dialog'
import FileU from './file-dialog'
import page from '@/utils/page'

export default {
  components: { Dialog, FileU },
  extends: page,
  props: {
    reqList: {
      default: disks,
      type: Function
    },
    reqDel: {
      default: delDisk,
      type: Function
    }
  },
  watch: {
    list: {
      handler(n, o) {
        this.$set(this, 'showTables', true)
      },
      deep: true
    },
    diskFiles: {
      handler(n, o) {
        this.$set(this, 'showFlieTalbes', true)
      },
      deep: true
    }
  },
  data() {
    return {
      pageItem: {},
      fileKeep: [{}],
      diskFiles: [],
      dField: ['id', 'name', 'organ_id', 'p_id'],
      dFieldFileU: ['e_id'],
      showTables: false,
      showFlieTalbes: false,
      dropdowns: [{ title: '首页', p_id: '' }],
      infoO: {},
      approves: [],
      parameter: { organ_id: '', p_id: '0' }
    }
  },
  created() {
    this.init()
    this.getList()
    this.queryFiles()
  },
  methods: {
    init() {
      this.$set(this.parameter, 'p_id', this.$route.query.p_id)
      this.$set(this.parameter, 'organ_id', this.$route.query.organ_id)
      this.dropdowns.push({
        title: this.$route.query.name,
        p_id: this.$route.query.p_id
      })
    },
    menuIndex(e){
      this.handleHiddenR()
      let p = this.getPoint(window.document.getElementById('dfb'))
      this.$refs['rib'].style.left = (e.clientX - p.x) + 'px'
      this.$refs['rib'].style.top = (e.clientY - p.y) + 'px'
      this.$refs['rib'].style.display = 'block'
    },
    handleDeleteBefore(e) {
      this.handleHiddenR()
      if(e === 'c') {
        this.handleDelete({id: this.pageItem.id})
      } else if(e === 'f') {
        this.$confirm('此操作将删除附件，数据将无法恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          delF({
            'db_type': 'logc_dept_disk_archives',
            'ids': this.pageItem.id,
            'paths': this.pageItem.path
          }).then(response => {
            this.queryFiles()
            this.$message.success('删除成功')
          })
        })
      }
    },
    handleDialogBefore(e) {
      this.handleHiddenR()
      this.handleDialog(e)
    },
    uploadFile(e) {
      this.handleHiddenR()
      this.handleDialog(e)
    },
    flushPage() {
      this.$set(this, 'showTables', false)
      this.$set(this, 'showFlieTalbes', false)
      this.getList()
      this.queryFiles()
    },
    downloadFile() {
      if(this.pageItem && this.pageItem.url) {
        const downloadElement = document.createElement('a')
        const href = this.pageItem.url
        downloadElement.href = href
        downloadElement.download = decodeURI(this.pageItem.file_name)
        document.body.appendChild(downloadElement)
        downloadElement.click()
        document.body.removeChild(downloadElement)
        window.URL.revokeObjectURL(href)
        this.handleHiddenR()
      }
    },
    handleHiddenR() {
      if(this.$refs['ric']) this.$refs['ric'].style.display = 'none'
      if(this.$refs['rif']) this.$refs['rif'].style.display = 'none'
      if(this.$refs['rib']) this.$refs['rib'].style.display = 'none'
    },
    fileClass(e) {
      let ss = e.split('.')
      let s = ss[ss.length - 1]
      s = s.toUpperCase()
      if(s === 'PNG' || s === 'JPG' || s === 'JPEG') {
        return 'tp'
      } else {
        if(s === 'PDF') {
          return 'pdfj'
        } else if(s === 'XLSX' || s === 'XLS') {
          return 'xlsj'
        } else if(s.toUpperCase() === 'DOCX' || s === 'DOC') {
          return 'wordj'
        } else if(s === 'PPT' || s === 'PPTX') {
          return 'pptj'
        } else {
          return 'otherj'
        }
      }
    },
    handleContextmenu(item) {
      this.handleHiddenR()
      let p = this.getPoint(window.document.getElementById('dfc'+item.id))
      this.$refs['ric'].style.left = (p.x + 40) + 'px'
      this.$refs['ric'].style.top = (p.y + 40) + 'px'
      this.$refs['ric'].style.display = 'block'
      this.$set(this, 'pageItem', item)
    },
    handleContextmenuFile(item) {
      this.handleHiddenR()
      let p = this.getPoint(window.document.getElementById('dft'+item.id))
      this.$refs['rif'].style.left = (p.x + 40) + 'px'
      this.$refs['rif'].style.top = (p.y + 40) + 'px'
      this.$refs['rif'].style.display = 'block'
      this.$set(this, 'pageItem', item)
    },
    getPoint: function (e) {
      var e = e || window.event
      var x = e.offsetLeft
      var y = e.offsetTop
      e = e.offsetParent
      while (e) {
        if (e && e.className && e.className === 'app-container') break
        x += e.offsetLeft - e.scrollLeft
        y += e.offsetTop
        e = e.offsetParent
      }
      return {
        'x': x,
        'y': y
      }
    },
    breadcrumbChange(item, i) {
      if(item.p_id === '') {
        this.$store.dispatch("tagsView/delView", this.$route)
        this.$router.push({ path: '/dept/disk' })
      }else{
        let arr = this.dropdowns
        arr = arr.slice(0, i + 1)
        this.$set(this, 'dropdowns', arr)
        this.$set(this.parameter, 'p_id', item.p_id)
        this.$set(this, 'showTables', false)
        this.$set(this, 'showFlieTalbes', false)
        this.getList()
        this.queryFiles()
      }
    },
    handleFolder(e) {
      this.$set(this.parameter, 'p_id', e.id)
      const dropdown = {}
      dropdown.title = e.name
      dropdown.p_id = e.id
      this.dropdowns.push(dropdown)
      this.$set(this, 'showTables', false)
      this.$set(this, 'showFlieTalbes', false)
      this.getList()
      this.queryFiles()
    },
    queryFiles() {
      queryFiles({
        e_id: this.parameter.p_id
      }).then(response => {
        this.diskFiles = response.list
      })
    }
  }
}
</script>
<style scoped>
.ri{
  border-radius: 3px;
  width: 80px;
  display: none;
  font-size: 13px;
  background-color: #fff;
}
.ri /deep/ .el-card__body {
  padding: 6px 0;
}
.ri-item {
  text-align: center;
  padding: 8px 0;
  cursor: pointer;
}
.ri-item:hover {
  background-color: #dfe6ec;
}
.fc{
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.fdc{
  margin-right: 5px;
  width: 85px;
  height: 125px;
  overflow: hidden;
}
.fcc{
  padding: 0;
  height: 126px;
  width: 85px;
}
.fctc{
  width: 85px;
  height: 60px;
  top: 0;
  left: 0;
}
.fcwc{
  top: 65px;
  left: 0;
  width: 85px;
  height: 60px;
  font-size: 11px;
  line-height: 15px;
  overflow: hidden;
}
.file-table /deep/ td {
  padding: 0;
  border: 0;
  height: 126px;
  width: 85px;
}
.file-table /deep/ .cell{
  border: 0;
  width: 85px;
  padding: 0;
}
.breadcrumb-div /deep/ .el-breadcrumb{
  line-height: 35px;
}
</style>
